import { Skeleton } from "antd";
import { backgroundColor } from "../config/defaultSettings";
import styles from "./loading.css";
import { useEffect } from "react";
import html2canvas from "html2canvas";

export default () => {
  useEffect(() => {
    document.onvisibilitychange = () => {
      if (!document.hidden) return;

      // 截屏并缓存，是给 public/scripts/loading.js 用的。
      const page = document.getElementById("root");
      if (!page) return;

      html2canvas(page).then(canvas => {
        const b64 = canvas.toDataURL("image/jpeg", 0.9);
        localStorage.setItem("screenshotData", b64);
      });
    };
  }, []);

  return (
    <div className={styles.loadingPage} style={{ backgroundColor }}>
      <Skeleton active />
    </div>
  );
};
